.logo {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.logo-img {
  user-select: none;
  display: flex;

  .logo-img-box {
    position: relative;
    width: 50px;
    height: 50px;

    .img1 {
      width: 50px;
      height: 50px;
      position: absolute;
      top: 0;
      left: 0;
    }

    .img2 {
      width: 50px;
      height: 50px;
      position: absolute;
      top: 0;
      left: 0;
      animation: logoAnimate1 3s linear infinite;
    }


    @keyframes logoAnimate1 {
      0% {}

      50% {
        transform: scale(1.1);
        opacity: 0.5;
      }

      75%{
        transform: scale(1.2);
        opacity: 0.3;
      }

      100% {
        transform: scale(1.3);
        opacity: 0.1;
      }
    }


  }
}

.text {
  font-family: 'STHupo';
  color: $font-color;
  text-shadow: 3px 3px 3px RGBA(0, 0, 0, 0.4);
  margin: auto 0 auto 0.5rem;
}